<template>
  <div id="app">
    <!-- <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/> -->

    <!-- <button v-on:click="show = !show">Toggle</button>
    <transition name="fade">
      <p v-if="show">hello</p>
    </transition> -->

    <motaikuang
      btnType="3"
      @cancel="canelfu"
      v-bind:showModal="show"
      :method="ggg"
      @queding="quedingfu"
    >
      <template v-slot:body>
        <p>我是插槽的内容 我想写啥 就写啥</p>
      </template>
    </motaikuang>

    <!-- 这个要移动到 自己的长周期项目里面  -->
    <button @click="aaa(12345678)">用宇宙唯一id删除后台管理系统</button>
     <button @click="zzz(12345678)">用宇宙唯一id删除后台管理系统</button>
  </div>
</template>




<script>
// import  {getUsername,postUsernamewucanshu} from '@/api/user.js'
import motaikuang from "./components/donghuamotaikuang";

export default {
  name: "helloworld",
  props: [],
  components: {
    motaikuang,
  },
  data() {
    return {
      show: false,
      ggg: function () {},
    };
  },
  //方法 函数写这里
  methods: {
    aaa(xingcan) {
      console.log("xingcan", xingcan);
      // 要删除zs这个用户的id进去 全局了
      this.$store.commit("addid", xingcan);
      console.log("进入aaa里面了");
      this.ggg = this.bbb;
   
      this.show = !this.show;
    },
    canelfu() {
      console.log("我来到了cancelfu里面了");
      this.show = false;
    },
    find() {
      console.log("查询现在数据库里面的数据！！！");
    },
    bbb(id) {
       axios  ({
           method:'post',
           data:{
             id:id
           }
       }).then(res=>{

       })
      //  this.find()
      alert("我是axios请求 我开始删除数据l ");
      console.log("bbb调用了 外部的");

      console.log("我是宇宙唯一id我打印出来看看", id);
    },
    quedingfu(hanshu) {
      console.log('确定fu')
      console.log(hanshu);
      // console.log('来到了外部的quedingfu里面了')
       hanshu(this.$store.state.id)
      // this.show =false
    },
  },
  //计算属性
  computed: {},
  //侦听器
  watch: {},
  //过滤器
  filters: {},
  //以下是生命周期
  //组件创建之前
  beforeCreate() {},
  //组件创建之后
  created() {},
  //页面渲染之前
  beforeMount() {},
  //页面渲染之后
  mounted() {},
  //页面视图数据更新之前
  beforeUpdate() {},
  //页面视图数据更新之后
  updated() {},
  //页面销毁之前
  beforeDestroy() {},
  //页面销毁之后
  destroyed() {},
};
</script>
<style lang="scss">
//企业级CSS引用1  resetcss 这个是必有的 因为要初始化一些W3C难看的样式
@import "./assets/scss/reset.scss";
// 企业级CSS引用2  一些高频的样式 写在base.scss里面 比如 左浮动 右浮动  清除浮动等
@import "./assets/scss/base.scss";
// 企业级CSS引用3 一些函数式要传值的 写在mixin里面
@import "./assets/scss/mixin.scss";
// 企业级CSS引用4  一个网站或者APP商业化的应用都有颜色的的划分 去美化这个APP或者网站 这里写设计师定死的公用颜色
@import "./assets/scss/config.scss";

// 这俩就是为了写的方便而存在的 这个自由发挥
@import "./assets/scss/modal.scss";
@import "./assets/scss/button.scss";
// #app {
//   font-family: Avenir, Helvetica, Arial, sans-serif;
//   -webkit-font-smoothing: antialiased;
//   -moz-osx-font-smoothing: grayscale;
//   text-align: center;
//   color: #2c3e50;
// }

// #nav {
//   padding: 30px;

//   a {
//     font-weight: bold;
//     color: #2c3e50;

//     &.router-link-exact-active {
//       color: #42b983;
//     }
//   }
// }

// .fade-enter {
//   opacity: 0;
// }

// .fade-enter-active {
//   transition: opacity 2s;
// }

// .fade-enter-to {
//   opacity: 1;
// }

// .fade-leave {
//   opacity: 1;
// }

// .fade-leave-active {
//   transition: opacity 2s;
// }

// .fade-leave-to {
//   opacity: 0;
// }
</style>
